<!doctype html>
<html lang="en">
<head>
    <title>Filter - wijgrid extension</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Overview" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijcombobox.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijfilter.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />

    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>

    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijcombobox.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijfilter.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>

    <script src="js/jquery.wijmo.wijgrid-filter-ext.js" type="text/javascript"></script>

    <style type="text/css">
        .wijmo-wijgrid .filterDialog-dialogButton
        {
            position: absolute;
            width: 32px;
            height: 100%;
            right: 0;
            top: 0;
        }   
        
        .filterDialog-dialogContainer
        {
            overflow: visible !important;
            width: 400px;
        }
        
        .wijmo-wijgrid .wijmo-wijgrid-headerrow .ui-icon.ui-icon-triangle-1-n,
        .wijmo-wijgrid .wijmo-wijgrid-headerrow .ui-icon.ui-icon-triangle-1-s
        {
            left: 0 !important;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#demo").wijgridfilter({
                allowSorting: true,
                data: [
                    [27, 'Canada', 'Adams, Craig', 32, 2009, 'Seria, Brunei'],
                    [43, 'Canada', 'Boucher, Philippe', 36, 2008, 'Saint-Apollinaire, Quebec'],
                    [24, 'Canada', 'Cooke, Matt', 30, 2008, 'Belleville, Ontario'],
                    [87, 'Canada', 'Crosby, Sidney (C)', 21, 2005, 'Cole Harbour, Nova Scotia'],
                    [1, 'United States', 'Curry, John', 25, 2007, 'Shorewood, Minnesota'],
                    [9, 'Canada', 'Dupuis, Pascal', 30, 2008, 'Laval, Quebec'],
                    [7, 'United States', 'Eaton, Mark', 32, 2006, 'Wilmington, Delaware'],
                    [26, 'Ukraine', 'Fedotenko, Ruslan', 30, 2008, 'Kiev, U.S.S.R.'],
                    [29, 'Canada', 'Fleury, Marc-Andre', 24, 2003, 'Sorel, Quebec'],
                    [32, 'Canada', 'Garon, Mathieu', 31, 2009, 'Chandler, Quebec'],
                    [2, 'United States', 'Gill, Hal', 34, 2008, 'Concord, Massachusetts'],
                    [28, 'Canada', 'Godard, Eric', 29, 2008, 'Vernon, British Columbia'],
                    [3, 'United States', 'Goligoski, Alex', 23, 2004, 'Grand Rapids, Minnesota'],
                    [55, 'Russia', 'Gonchar, Sergei (A)', 35, 2005, 'Chelyabinsk, U.S.S.R.']
                ],
                columns: [
                    { headerText: "Number", dataType: "number", dataFormatString: "n0" },
                    { headerText: "Nationality", filterValue: "Canada", filterOperator: "Equals" },
                    { headerText: "Player" },
                    { headerText: "Age", dataType: "number", dataFormatString: "n0" },
                    { headerText: "Acquired" },
                    { headerText: "Birthplace" }
                ]
            });

        });
     </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Overview</h2>
        </div>
        <div class="main demo">
            <table id="demo"></table>

            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
          <p>
            This sample shows a wijgrid extension which uses the wijfilter to create an Excel-like filter dialog.
          </p>
        </div>
    </div>
</body>
</html>
